<template>
	<!-- 推广收益 -->
	<view class="">
		<view class="">
			<view class="li">总充值现金<view>{{info.czMoney}}</view></view>
			<view class="li">商家退回<view>{{info.tkMoney}}</view></view>
			<view class="li">剩余可退<view>{{info.useMoney}}</view></view>
		</view>
		<view class="">
			<view class="li">待回收本金<view>{{info.costMoneyNoCheck}}</view></view>
			<view class="li" @click="huishoushow">总回收本金▼<view>{{info.costMoneyAll}}</view></view>
			<view class="li" v-show="ishuishou">今日回收<view>{{info.costMoneyCur}}</view></view>
			<view class="li" v-show="ishuishou">昨日回收<view>{{info.costMoneyYes}}</view></view>
			<view class="li" v-show="ishuishou">本月回收<view>{{info.costMoneyCurMon}}</view></view>
			<view class="li" v-show="ishuishou">上月回收<view>{{info.costMoneyPriMon}}</view></view>
		</view>
		<view class="c_presentab">
			<view class="c_presentabitem" @tap="tab(0)">
				<view class="c_i" :class="{c_iactive:activeId===0}">
					全部
				</view>
			</view>
			<view class="c_presentabitem" @tap="tab(1)">
				<view class="c_i" :class="{c_iactive:activeId==1}">
					今日
				</view>
			</view>
			<view class="c_presentabitem" @tap="tab(2)">
				<view class="c_i" :class="{c_iactive:activeId==2}">
					昨日
				</view>
			</view>
			<view class="c_presentabitem" @tap="tab(3)">
				<view class="c_i" :class="{c_iactive:activeId==3}">
					本月
				</view>
			</view>
			<view class="c_presentabitem" @tap="tab(4)">
				<view class="c_i" :class="{c_iactive:activeId===4}">
					上月
				</view>
			</view>
		</view>
		<view class="c_Divdenlist">
			<view class="c_item" v-for="(item,index) in list">
				<view class="c_Divdenlists">
					<image :src="item.logo"></image>
					<view class="c_flex_1">
						<view class="title">{{item.supname}}</view>
						<view>时间：{{item.finishtime}}</view>
						<view class="clamp">编号：{{item.ordersn}}</view>
					</view>
					<view class="c_info">
						<view class="">支付<text class="c_Divedentype"> {{item.price}}</text></view>
						<view class="">{{item.discount | toFix}}折</view>
						<view class="c_Divedentype2">+{{item.money}}</view>
						<view class="">卡余：{{item.usemoney}}</view>
					</view>	
				</view>
			</view>
			<view class="hback">
				<image v-if="isloading" src="../../static/business/loading.gif" mode=""></image>
				<view v-if="isempty">到底了~</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeId: 0,
				list: [],
				page: 0,
				shows: "",
				isloading: false,
				isempty: false,
				ishuishou: false,
				info: {
					useMoney:'',
					tkMoney:'',
					czMoney:'',
					costMoneyNoCheck:'',
					costMoneyAll:'',
					costMoneyCur:'',
					costMoneyCurMon:'',
					costMoneyPriMon:'',
					costMoneyYes:'',
					industrys: [{
						value: '',
						text: "全部"
					}],
					salemans: [{
						value: '',
						text: "全部"
					}],
					num: "0"
				},
			}
		},
		onReachBottom() {
			this.getList();
		},
		onLoad(option) {
			this.getList();
			this.getInfo();
		},
		filters: {
			toFix(val){
				return Number(val).toFixed(2);
			}
		},
		methods: {
			huishoushow(){
				this.ishuishou = !this.ishuishou;
			},
			getInfo() {
				this.$axios('signing/mainCheck', 'POST', 'member', this.formData).then(res => {
					if (res.data.code == 200) {
						this.info.useMoney = res.data.data.useMoney;
						this.info.tkMoney = res.data.data.tkMoney;
						this.info.czMoney = res.data.data.czMoney;
						this.info.costMoneyAll = res.data.data.costMoneyAll;
						this.info.costMoneyCur = res.data.data.costMoneyCur;
						this.info.costMoneyCurMon = res.data.data.costMoneyCurMon;	
						this.info.costMoneyNoCheck = res.data.data.costMoneyNoCheck;
						this.info.costMoneyPriMon = res.data.data.costMoneyPriMon;
						this.info.costMoneyYes = res.data.data.costMoneyYes;	
						let obj = res.data.data.industrys.map(v => ({
							value: v.id,
							text: v.name
						}))
						this.info.industrys = [...this.info.industrys, ...obj];
						let obj1 = res.data.data.salemans.map(v => ({
							value: v.id,
							text: v.nickname
						}))
						this.info.salemans = [...this.info.salemans, ...obj1];
					}
				})
			},
			// 跳转页面
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			tab: function(index) {
				if(this.activeId === index) return ;
				this.activeId = index;
				this.list = [];
				this.page = 0;
				this.getList();
			},
			getList(){
				var that = this;
				that.page++;
				this.isloading=true;
				this.isempty=false;
				that.$axios('order/buypriceLog', "POST", 'bonus', {
					page: that.page,
					type: that.activeId,
				}).then(res => {
					this.isloading=false
					if (res.data.code == 200) {
						let length=res.data.data.list.length;
						that.list = [...that.list, ...res.data.data.list];
						that.isempty = length <= 0 ? true : false;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #eee;
		padding-bottom: 130upx;
	}
	.li{
		font-size: 32upx;
		color:#666 ;
		font-weight: bold;
		padding-top: 10upx;
		padding-right: 30upx;
		padding-left: 30upx;
		padding-bottom: 10upx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px hsl(0, 0%, 87%) solid; 
	}
	.iconimg {
		position: fixed;
		width: 42upx;
		top: 16upx;
		right: 26upx;
		z-index: 100;
	}
	.c_presentab {
		background: #fff;
		display: flex;
		justify-content: space-between;
		// position: fixed;
		width: 100%;
		// z-index: 10;

		.c_presentabitem {
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			width: 25%;

			.c_i {
				display: inline-block;
			}

			.c_iactive {
				border-bottom: 2px solid $base-color;
				color: $base-color;
			}
		}
	}

	.c_Divdensearch {
		background: #fff;
		display: flex;
		align-items: center;
		padding: 20upx;
		margin-bottom: 20upx;

		input {
			background: #ccc;
			margin-left: 20upx;
		}
	}
	.c_Divdenlist{
		position: relative;
		z-index: 1;
		// padding-top: 80rpx;
	}
	.c_Divdenlists {
		padding: 20upx;
		background: #fff;
		margin-top: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		image{
			width: 130rpx;
			height: 130rpx;
			border-radius: 15rpx;
		}
		.c_flex_1{
			flex: 1;
			padding-right: 20rpx;
			font-size: 26rpx;
			color: #666;
			padding-left: 15rpx;
			width: 400rpx;
			.title{
				color: #333;
				font-weight: bold;
				margin-bottom: 10rpx;
				font-size: 30rpx;
			}
		}
		.c_info{
			width: 170rpx;
			font-size: 26rpx;
			text-align: right;
			color: #666;
			white-space: nowrap;
		}
		.c_Divedentype {
			padding-top: 10upx;
			color: #000;
			font-weight: bold;
		}
		.c_Divedentype2{
			color: #e10602;
			font-weight: bold;
		}
		.status_1{
			color: #fff;
			font-size: 22upx;
			font-weight: bold;
			text-align:center;
			border:1px solid $bg-color;
			padding:0px 2px;
			border-radius:4px;
			background:$bg-color;
		}
		.status_2{
			color: #fff;
			font-size: 24upx;
			font-weight: bold;
			text-align:center;
			border:1px solid $bg-color;
			padding:0px 2px;
			border-radius:4px;
			background:$bg-color;
		}
		.status_3{
			color: #fff;
			font-size: 24upx;
			font-weight: bold;
			text-align:center;
			border:1px solid #06803A;
			padding:0px 2px;
			border-radius:4px;
			background:#06803A;
		}
	}


	.c_showsimg1 {
		width: 80upx;
		height: 80upx;
	}

	.c_showsimg2 {
		border-radius: 10upx;
		width: 100upx;
		height: 100upx;
	}

	.c_goodsname {
		flex: 1;

		.c_goodsnametitle {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}

	.ordersnum {
		color: #666;
		padding-bottom: 10upx;
	}

	.hback {
		padding-top: 30upx;
		text-align: center;
		color: #0062CC;
		image {
			height: 60upx;
			width: 60upx;
		}
	}

	.c_goodsname-bonus {
		position: absolute;
		right: 20upx;
		text-align: center;
	}
</style>
